<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>
        111
        <button>按钮</button><span>内容</span>
      </li>
      <li>
        222
        <button>按钮</button><span>内容</span>
      </li>
      <li>
        333
        <button>按钮</button><span>内容</span>
      </li>
    </ul>

    <script>
      // 点击每个按钮的时候 按钮后面的span 会显示 在点一下会隐藏；
      //我的写法
      /* var btn = document.querySelectorAll("button");
      //   var sp = document.querySelectorAll("span");
      btn.forEach(function (item1, key) {
        // console.log(item1, key);
        var flag = true;
        item1.onclick = function () {
          //   console.log(111);
          //   console.log(item1, key);
          console.log(item1.nextElementSibling);

          flag = !flag;
          if (!flag) {
            item1.nextElementSibling.style.display = "none";
          } else {
            item1.nextElementSibling.style.display = "inline-block";
          }
        };
      }); */

      //错误的写法  一个flag 控制三个显示隐藏会相互之间影响
      var flag = true; //控制span显示或者隐藏的控件
      let lis = document.querySelectorAll("li");

      lis.forEach(function (li) {
        // console.log(li);
        var btn = li.querySelector("button");
        console.log(btn);
      });
    </script>
  </body>
</html>
